Hexo,Unleash Your Blogging Magic

本文简单介绍了Hexo搭建个人博客的丰富玩法和不同平台撰写博客上的适配差异。

一、玩转Hexo

不同主题的Hexo主题博客，大致特点如下：

主题	特点
Fluid	加载速度快，有简单的动态效果，移动端适配佳
Butterfly	功能全面，社区活跃，高度可定制
Landscape	默认主题，轻量级，简洁易上手（有较多限制）

博主尝试了这几种后对fluid追一见钟情，遂使用此主题。

（一）更换主题

1. 安装 Fluid 主题

在 Hexo 博客根目录（/HexoData）运行：

npm install --save hexo-theme-fluid

2. 修改 Hexo 主配置

打开_config.yml（位于博客根目录），找到theme字段，修改为：

theme: fluid

如需要可以将 language 设置为中文：

language: zh-CN

3. 创建 Fluid 的配置文件

Fluid主题的配置需要额外文件：
在博客根目录下创建_config.fluid.yml文件：

cp node_modules/hexo-theme-fluid/_config.yml _config.fluid.yml

编辑_config.fluid.yml来自定义主题（如菜单、颜色、字体等）。

4. 迁移 Landscape 的内容（可选）

自定义样式/脚本：将 Landscape 的 source/css 或 source/js 文件复制到 Fluid 的 source 目录。
文章/页面：_posts 和 _pages 内容无需迁移，Hexo 会自动读取。

5. 清理并重新生成

hexo clean && hexo g && hexo s

访问 http://localhost:4000 查看效果。

（二）添加评论系统

Hexo快速构建个人小站-Fulid主题下添加Valine评论系统(三)
注意comments在(\themes\你的主题名\_config.yml)文件中，Hexo 主配置文件(_config.yml)通常用于全局配置（如博客标题、作者等），添加评论系统的配置不在这个文件中。将appid和appkey填入，同时记得根据选择的插件修改博客评论系统的type！

（三）添加背景音乐

Hexo-Fluid主题添加音乐页面

（四）给每篇博客添加封面/背景

在source文件夹下新建medias文件夹用于存放图片，在每篇博客文章front-matter的区域添加：
背景图片：

banner_img: 图片路径（/medias/图片文件名）

封面图片预览：

index_img: 图片路径（/medias/图片文件名）

其他丰富玩法参考官方文档：

• 开始使用 | Hexo Fluid 用户手册
• 配置指南 | Hexo Fluid 用户手册

二、CSDN与Hexo撰写差异

1. 插入图片
插入图片的语法如下：![插入图片的注释](插入图片的连接或本地路径)
  CSDN 不支持本地图片链接：如果你在 CSDN 写博客时插入本地图片路径，其他用户无法访问你的本地文件。
  使用Hexo进行博客撰写时，图片可以放在source/images/ 文件夹（可以自行创建）使用相对路径，避免文件迁移后路径找不到而导致问题，建议一篇博客单独创建一个文件夹进行图片的存储便于管理。
  CSDN中的图片注释无法显示，必须通过在图片下添加<center>添加图片注释</font</center>的方式进行注释。

添加图片注释

  网上其他博主也有推荐使用七牛云存储的，将图片从本地上传到七牛云存储仓库。得到一个外链地址，将外链地址作为图片的URL地址写进文章。

2.数学公式
CSDN中默认latex的格式是可以进行渲染的，而在Hexo中需要在全局配置文件中进行修改：

# 数学公式，开启之前需要更换 Markdown 渲染器，否则复杂公式会有兼容问题，具体请见：https://hexo.fluid-dev.com/docs/guide/##latex-数学公式
# Mathematical formula. If enable, you need to change the Markdown renderer, see: https://hexo.fluid-dev.com/docs/en/guide/#math
math:
  # 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`
  # If you want to use math on the custom page, you need to set `math: true` in Front-matter
  enable: true

  # 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度
  # If true, only set `math: true` in Front-matter will enable math, to load faster when the page does not contain math
  specific: false

封面来源：如何使用Hexo+Github Pages 搭建个人博客，手把手最新教程